<template name="room">
	<div class="main-content-flex">
		<section class="messages-container flex-tab-main-content {{adminClass}}" id="{{windowId}}" aria-label="{{_ "Channel"}}">
			{{# if showTopNavbar}}
				{{# headerRoom}}
					{{#with flexData}}
						<div class="rc-header__block rc-header__block-action">
							{{> RoomsActionTab}}
						</div>
					{{/with}}
				{{/headerRoom}}
			{{/if}}
			<div class="messages-container-wrapper">
				<div class="messages-container-main dropzone {{dragAndDrop}}">
					<div class="dropzone-overlay {{isDropzoneDisabled}} background-transparent-darkest color-content-background-color">{{_ dragAndDropLabel}}</div>
					{{#unless embeddedVersion}}
						{{#if announcement}}
						<div class="fixed-title announcement {{getAnnouncementStyle}}" aria-label="{{RocketChatMarkdownInline announcement}}">
							<p>{{{RocketChatMarkdownInline announcement}}}</p>
						</div>
						{{/if}}
					{{/unless}}
					<div class="container-bars {{containerBarsShow unreadData uploading}}">
						{{#with unreadData}}
							{{#if since}}
								{{#if count}}
									<div class="unread-bar color-primary-action-color background-component-color">
										<button class="jump-to">
											<span class="jump-to-large">{{_ "Jump_to_first_unread"}}</span>
											<span class="jump-to-small">{{_ "Jump"}}</span>
										</button>
										<span class="unread-count-since">
											{{_ "S_new_messages_since_s" count formatUnreadSince}}
										</span>
										<span class="unread-count">
											{{_ "N_new_messages" count}}
										</span>
										<button class="mark-read">
											{{_ "Mark_as_read"}}
										</button>
									</div>
								{{/if}}
							{{/if}}
						{{/with}}
						{{#each uploading}}
							<div class="upload-progress color-primary-action-color background-component-color {{#if error}}error-background error-border{{/if}}">
								{{#if error}}
									<div class="upload-progress-text">
										{{error}}
									</div>
									<button class="upload-progress-close">
										{{_ "close"}}
									</button>
								{{else}}
									<div class="upload-progress-progress" style="width: {{percentage}}%;"></div>
									<div class="upload-progress-text">
										[{{percentage}}%] {{name}}
									</div>
									<button class="upload-progress-close">
										{{_ "Cancel"}}
									</button>
								{{/if}}
							</div>
						{{/each}}
					</div>
					<div class="messages-box {{#if selectable}}selectable{{/if}} {{messageViewMode}} {{hasLeader}}">
						<div class="ticks-bar"></div>
						<button class="new-message background-primary-action-color color-content-background-color not">
							<i class="icon-down-big"></i>
							{{_ "New_messages"}}
						</button>
						<div class="jump-recent background-component-color {{#unless hasMoreNext}}not{{/unless}}">
							<button>{{_ "Jump_to_recent_messages"}} <i class="icon-level-down"></i></button>
						</div>
						{{#unless canPreview}}
							<div class="content room-not-found error-color">
								<div>
									{{_ "You_must_join_to_view_messages_in_this_channel"}}
								</div>
							</div>
						{{/unless}}
						{{#with roomLeader}}
							<div class="room-leader message color-primary-font-color content-background-color border-component-color {{hideLeaderHeader}}">
								<button class="thumb user-card-message">
									{{> avatar username=username }}
								</button>
								<div class="leader-name">{{name}}</div>
								<div class="leader-status userStatus">
									<span class="color-ball status-bg-{{status}}"></span>
									<span class="status-text leader-status-text">{{statusDisplay}}</span>
								</div>
								<a class="chat-now" href="{{chatNowLink}}">{{_ "Chat_Now"}}</a>
							</div>
						{{/with}}
						<div class="wrapper {{#if hasMoreNext}}has-more-next{{/if}} {{hideUsername}} {{hideAvatar}}">
							<ul aria-live="polite">
								{{#if canPreview}}
									{{#if hasMore}}
										<li class="load-more">
											{{#if isLoading}}
												{{> loading}}
											{{/if}}
										</li>
									{{else}}
										<li class="start color-info-font-color">
											{{#if hasPurge}}
												<div class="start__purge-warning error-background error-border error-color">
													{{> icon block="start__purge-warning-icon" icon="warning"}}
													{{#unless filesOnly}}
														{{#unless excludePinned}}
															{{_ "RetentionPolicy_RoomWarning" time=purgeTimeout}}
														{{else}}
															{{_ "RetentionPolicy_RoomWarning_Unpinned" time=purgeTimeout}}
														{{/unless}}
													{{else}}
														{{#unless excludePinned}}
															{{_ "RetentionPolicy_RoomWarning_FilesOnly" time=purgeTimeout}}
														{{else}}
															{{_ "RetentionPolicy_RoomWarning_UnpinnedFilesOnly" time=purgeTimeout}}
														{{/unless}}
													{{/unless}}
												</div>
											{{/if}}

											{{> RoomForeword }}
										</li>
									{{/if}}
								{{/if}}

								{{# with messageContext}}
									{{#each msg in messagesHistory}}{{> message showRoles=true index=@index shouldCollapseReplies=false msg=msg room=room subscription=subscription settings=settings u=u}}{{/each}}
								{{/with}}

								{{#if hasMoreNext}}
									<li class="load-more">
										{{#if isLoading}}
											{{> loading}}
										{{/if}}
									</li>
								{{/if}}
							</ul>
						</div>
					</div>
					<footer class="footer border-component-color">
						{{> messageBox messageboxData}}
					</footer>
				</div>
				{{# with openedThread}}
					{{> ThreadComponent}}
				{{/with}}
				{{# unless shouldCloseFlexTab}}
					{{#with flexData}}
						{{> contextualBar}}
					{{/with}}
				{{/unless}}
			</div>
		</section>
	</div>
</template>
